iT邦幫忙

2024 iThome 鐵人賽

DAY 23
0
Modern Web

html跟css神奇的化學反應系列 第 23

day 23 css 的 position(2)

  • 分享至 

  • xImage
  •  

今天繼續昨天沒有説完的吧,接下來剩下absolutesticky,我們先說absolute吧

absolute

absolute是絕對,相對於最近定位的之前定位例如固定。而如果絕對定位元素沒有之前的定位的話,則以他為文件主體並隨著頁面滾動而移動。
https://ithelp.ithome.com.tw/upload/images/20240930/201686293v2nFb3xPY.png
https://ithelp.ithome.com.tw/upload/images/20240930/20168629DRRrZLPxWz.png
在我紅色框起來的地方就可以看出即使頁面滑動之後還是在一樣的位子,這就是可以用fixed做的。

sticky

sticky是基於使用者滾動的位置,sticky會根據滾動位置在relative之間切換。
注意:必須至少指定top,right,bottom和left。我拿google作爲例子去説這個是可以使用sticky的方式寫的
https://ithelp.ithome.com.tw/upload/images/20240930/20168629MXf6NYb3Zj.png
而css是

        .relative {
            position: relative;
            width: 400px;
            height: 200px;
            border: 3px solid #f5dd45;
        } 

        .absolute {
            position: absolute;
            top: 80px;
            right: 0;
            width: 200px;
            height: 100px;
            border: 3px solid #aee264;
        }

這就是基本position會用到的屬性啦~今天就到這裏了我們明天見~


上一篇
day 22 css 的 position
下一篇
day 24 css 的 hover
系列文
html跟css神奇的化學反應30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言